<template>
	<view class="container">
		<view class="tabbar-item" :class="[item.centerItem ? ' center-item' : '']"
			:style="'width: calc(100% /' + tabbarList.length + ')'" @click="changeItem(item)"
			v-for="(item, i) in tabbarList" :key="i">
			<view class="item-top">
				<image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" />
			</view>
			<view class="item-bottom" :class="[curItem === item.id ? 'item-active' : '']">{{ item.text }}</view>
		</view>
</view>
</template>



<script setup>
import { onMounted,ref } from 'vue';
	
	const props = defineProps({
	    currPage: {
	        type: Object,
	        default:0
	    }
	})
	const curItem=ref(0)
	const tabbarList=ref( [{
						id: 0,
						pagePath: "/pages/index/index",
						iconPath: "/static/images/tabBer/shou.png",
						selectedIconPath: "/static/images/tabBer/shouu.png",
						text: "首页",
						centerItem: false
					}, {
						id: 1,
						pagePath: "/pages/service/service",
						iconPath: "/static/images/tabBer/fu.png",
						selectedIconPath: "/static/images/tabBer/fuu.png",
						text: "服务",
						centerItem: false
					},
					{
						id: 2,
						pagePath: "/pages/lutong/lutong",
						iconPath: "/static/images/tabBer/lu.png",
						selectedIconPath: "/static/images/tabBer/luu.png",
						text: "鲁通码",
						centerItem: true
					},
					{
						id: 3,
						pagePath: "/pages/interaction/interaction",
						iconPath: "/static/images/tabBer/hu.png",
						selectedIconPath: "/static/images/tabBer/huu.png",
						text: "互动",
						centerItem: false
					},
					{
						id: 4,
						pagePath: "/pages/user/user",
						iconPath: "/static/images/tabBer/my.png",
						selectedIconPath: "/static/images/tabBer/myy.png",
						text: "我的",
						centerItem: false
					}
				])
				onMounted(()=>{
					curItem.value = props.currPage; // 当前所选导航栏
					uni.hideTabBar(); // 隐藏 tabBar 导航栏
				})
				const changeItem=(e)=>{
					// console.log(e,'111111111111111');
					// 中间凸起按钮
					// if (e.id === 1) {
					// 	// todo
					// 	return;
					// }
					uni.switchTab({
						url: e.pagePath
					}); // 跳转到其他 tab 页面
				}
</script>


<!-- 

<script>
	export default {
		name:'custom-tabbar',
		props: {
			currPage: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				curItem: 0, 
				tabbarList: [{
						id: 0,
						pagePath: "pages/index/index",
						iconPath: "/static/images/tabBer/shou.png",
						selectedIconPath: "/static/images/tabBer/shouu.png",
						text: "首页"
						centerItem: false
					}, {
						id: 1,
						pagePath: "pages/service/service",
						iconPath: "/static/images/tabBer/fu.png",
						selectedIconPath: "/static/images/tabBer/fuu.png",
						text: "服务",
						centerItem: false
					},
					{
						id: 2,
						pagePath: "pages/lutong/lutong",
						iconPath: "/static/images/tabBer/lu.png",
						selectedIconPath: "/static/images/tabBer/luu.png",
						text: "鲁通码"
						centerItem: true
					},
					{
						id: 3,
						pagePath: "pages/interaction/interaction",
						iconPath: "/static/images/tabBer/hu.png",
						selectedIconPath: "/static/images/tabBer/huu.png",
						text: "互动"
						centerItem: false
					},
					{
						id: 4,
						pagePath: "pages/user/user",
						iconPath: "/static/images/tabBer/my.png",
						selectedIconPath: "/static/images/tabBer/myy.png",
						text: "我的",
						centerItem: false
					}
				] // 导航栏列表
			};
		},
		mounted() {
			this.curItem = this.currPage; // 当前所选导航栏
			// #ifdef H5
			uni.hideTabBar(); // 隐藏 tabBar 导航栏
			// #endif
		},
		methods: {
			/* 导航栏切换 */
			changeItem(e) {
				// 中间凸起按钮
				if (e.id === 1) {
					// todo
					return;
				}
				uni.switchTab({
					url: e.pagePath
				}); // 跳转到其他 tab 页面
			}
		}
	};
</script> -->


<style lang="scss">
	$textDefaultColor: #999; // 文字默认颜色
	$bottomBg: #fff; // 底部背景
	$textSelectedColor: #349eff; // 文字选中颜色
	$centerItemBg: #fff; // 中间凸起按钮背景

	.container {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 110rpx;
		color: $textDefaultColor;
		padding: 5rpx 0;
		background-color: $bottomBg;
		box-shadow: 0 0 10rpx #999;
	}

	.tabbar-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 100rpx;

		.item-top {
			flex-shrink: 0;
			width: 65rpx;
			height: 65rpx;
			padding: 4rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.item-bottom {
			width: 100%;
			font-size: 28rpx;
		}

		.item-active {
			color: $textSelectedColor;
		}
	}

	.center-item {
		position: relative;

		.item-top {
			position: absolute;
			top: -55rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 105rpx;
			height: 105rpx;
			background-color: $centerItemBg;
			border-radius: 50%;
		}

		.item-bottom {
			position: absolute;
			bottom: 5rpx;
		}
	}
</style>